<template>
  <div class="box">
    <div class="search-header">
      <van-search
        v-model="query"
        show-action
        clearable
        autofocus
        placeholder="请输入搜索关键词"
        @search="searchHandler"
      >
        <template #left>
          <div class="search-left">
            <van-icon name="arrow-left" size="22" @click="$router.back()" />
          </div>
        </template>
        <template #action>
          <div @click="searchHandler">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="content">
      <SearchList
        @itemClick="handleSearchItemClick"
        :dataList="hotSearchList"
        title="搜索历史"
      />
      <SearchList
        @itemClick="handleSearchItemClick"
        :dataList="hotSearchList"
        title="热门搜索"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import SearchList from './searchList.vue'
import { getHotWord, getSearchList } from '@/api/search'

// 头部
const query = ref('')
const hotSearchList = ref([])
const searchHandler = () => {
  // count limitnum  keyword
  query.value && handleSearchItemClick(query.value)
}

const handleSearchItemClick = (keyword: string) => {
  getSearchList({
    keyword,
  }).then((res) => {
    console.log(res)
    // localStorage.setItem('searchList', res.data)
  })
}

onMounted(() => {
  getHotWord().then((res: any) => {
    hotSearchList.value = res.data.filter(
      (item: { keyword: string; [propName: string]: any }) =>
        item.keyword !== '' && item.keyword !== undefined
    )
    console.log(hotSearchList)
  })
})
</script>
<style lang="scss" scoped>
.search-left {
  padding: 0 8px 0 0;
  color: #323233;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
</style>
